
<template>
  <div>
    <div class="panel panel-default panel-search">
      <el-form :inline="true">
        <el-form-item label="部门" prop="departmentId">
          <department-select
            :fnChange="search"
            v-model="page.query.param.departmentId"
            :clearable="true"
          ></department-select>
        </el-form-item>

        <el-form-item label="工号">
          <el-input v-model="page.query.param.workID" clearable></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="page.query.param.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="workState">
          <el-select
            @change="search"
            v-model="page.query.param.workState"
            :clearable="true"
          >
            <el-option :key="1" :value="'1'" :label="'1--试用'"></el-option>
            <el-option :key="2" :value="'2'" :label="'2--正式'"></el-option>
            <el-option :key="3" :value="'3'" :label="'3--离职'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="posId">
          <position-select
            :fnChange="search"
            v-model="page.query.param.posId"
            :clearable="true"
          ></position-select>
        </el-form-item>
        <el-form-item label="职称" prop="jobLevelId">
          <joblevel-select
            :fnChange="search"
            v-model="page.query.param.jobLevelId"
            :clearable="true"
          ></joblevel-select>
        </el-form-item>
        <el-form-item label="民族" prop="nationId">
          <nation-select
            :fnChange="search"
            v-model="page.query.param.nationId"
            :clearable="true"
          ></nation-select>
        </el-form-item>
        <el-form-item label="政治面貌" prop="politicId">
          <politics-select
            :fnChange="search"
            v-model="page.query.param.politicId"
            :clearable="true"
          ></politics-select>
        </el-form-item>
      </el-form>
    </div>
    <v-toolbar title="员工资料 " style="color: rebeccapurple" type="alert">
      <el-button
        slot="tip"
        type="primary"
        style="margin-left: 20px"
        @click="search"
        >查询</el-button
      >
      <el-button slot="tip" @click="cancel">取消</el-button>

      <el-button
        slot="tip"
        style="margin-top: 5px; margin-left: 20px"
        type="primary"
        plain
        @click="create"
        >新增</el-button
      >
    </v-toolbar>

    <v-table
      ref="table"
      :dblclick="edit"
      :page="page"
      :table-minheight="450"
      @dataloaded="onDataloaded"
    >
      <el-table-column
        prop="departmentId"
        :sortable="false"
        label="部门"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.department.name }}
        </template>
      </el-table-column>
      <el-table-column prop="workID" :sortable="false" label="工号" width="120">
        <template slot-scope="{ row }">
          {{ row.workID }}
        </template>
      </el-table-column>
      <el-table-column prop="name" :sortable="false" label="姓名" width="100">
        <template slot-scope="{ row }">
          {{ row.name }}
        </template>
      </el-table-column>
      <el-table-column
        prop="workState"
        :sortable="false"
        label="状态"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ DICT.WORKSTATE[row.workState] }}
        </template>
      </el-table-column>
      <el-table-column prop="gender" :sortable="false" label="性别" width="100">
        <template slot-scope="{ row }">
          {{ row.gender }}
        </template>
      </el-table-column>
      <el-table-column
        prop="birthday"
        :sortable="false"
        label="出生日期"
        width="100"
      >
        <template slot-scope="{ row }">
          <span style="color: ">
            {{ $dongxwDict.viewDate(row.birthday) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="idCard"
        :sortable="false"
        label="身份证号"
        width="150"
      >
        <template slot-scope="{ row }">
          {{ row.idCard }}
        </template>
      </el-table-column>
      <el-table-column
        prop="wedlock"
        :sortable="false"
        label="婚姻状况"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.wedlock }}
        </template>
      </el-table-column>

      <el-table-column
        prop="nationId"
        :sortable="false"
        label="民族"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.nation }}
        </template>
      </el-table-column>

      <el-table-column
        prop="nativePlace"
        :sortable="false"
        label="籍贯"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.nativePlace }}
        </template>
      </el-table-column>

      <el-table-column
        prop="politicId"
        :sortable="false"
        label="政治面貌"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.politics }}
        </template>
      </el-table-column>

      <el-table-column prop="email" :sortable="false" label="邮箱" width="100">
        <template slot-scope="{ row }">
          {{ row.email }}
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        :sortable="false"
        label="电话号码"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.phone }}
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        :sortable="false"
        label="联系地址"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.address }}
        </template>
      </el-table-column>

 <el-table-column
        prop="jobLevelId"
        :sortable="false"
        label="职称"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.job }}
        </template>
      </el-table-column>
       <el-table-column
        prop="posId"
        :sortable="false"
        label="职位"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.pos }}
        </template>
      </el-table-column>

      <el-table-column
        prop="tiptopDegree"
        :sortable="false"
        label="最高学历"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.tiptopDegree }}
        </template>
      </el-table-column>
      <el-table-column
        prop="specialty"
        :sortable="false"
        label="所属专业"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.specialty }}
        </template>
      </el-table-column>
      <el-table-column
        prop="school"
        :sortable="false"
        label="毕业院校"
        width="140"
      >
        <template slot-scope="{ row }">
          {{ row.school }}
        </template>
      </el-table-column>
      <el-table-column
        prop="beginDate"
        :sortable="false"
        label="入职日期"
        width="100"
      >
        <template slot-scope="{ row }">
          <span style="color: ">
            {{ $dongxwDict.viewDate(row.beginDate) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="conversionTime"
        :sortable="false"
        label="转正日期"
        width="100"
      >
        <template slot-scope="{ row }">
          <span style="color: ">
            {{ $dongxwDict.viewDate(row.conversionTime) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="notWorkDate"
        :sortable="false"
        label="离职日期"
        width="100"
      >
        <template slot-scope="{ row }">
          <span style="color: ">
            {{ $dongxwDict.viewDate(row.notWorkDate) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="engageForm"
        :sortable="false"
        label="聘用形式"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.engageForm }}
        </template>
      </el-table-column>
      <el-table-column
        prop="contractTerm"
        :sortable="false"
        label="合同期限"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.contractTerm }}
        </template>
      </el-table-column>
      <el-table-column
        prop="beginContract"
        :sortable="false"
        label="合同起始日期"
        width="100"
      >
        <template slot-scope="{ row }">
          <span style="color: ">
            {{ $dongxwDict.viewDate(row.beginContract) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="endContract"
        :sortable="false"
        label="合同终止日期"
        width="100"
      >
        <template slot-scope="{ row }">
          <span style="color: ">
            {{ $dongxwDict.viewDate(row.endContract) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="workAge"
        :sortable="false"
        label="工龄"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ row.workAge }}
        </template>
      </el-table-column>
      <el-table-column width="80" label="操作" :fixed="'right'">
        <template slot-scope="scope">
          <el-button type="text" title="编辑" @click="edit(scope.row)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button
            type="text"
            @click="del(scope.row, scope.$index)"
            title="删除"
          >
            <span style="color: red"> <i class="el-icon-delete red"></i></span>
          </el-button>
        </template>
      </el-table-column>
    </v-table>

    <v-dialog ref="formDiag" :width="'45%'" title="信息编辑">
      <form-panel @saved="onFormSaved"></form-panel>
      <div slot="footer" style="margin-right: 40px">
        <el-button type="primary" @click="$refs.formDiag.dispatch('submit')"
          >保存</el-button
        >
        <el-button
          type="default"
          @click="
            () => {
              $refs.formDiag.hide();
            }
          "
          >取消</el-button
        >
      </div>
    </v-dialog>
  </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.el-input {
  width: 160px;
}
.status_green {
  color: red;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>

<script>
import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
import FormPanel from "./Form";

import NationSelect from "@/components/widgets/hr/NationSelect.vue";
import PoliticsSelect from "@/components/widgets/hr/PoliticsSelect.vue";
import PositionSelect from "@/components/widgets/hr/PositionSelect.vue";
import JoblevelSelect from "@/components/widgets/hr/JoblevelSelect.vue";

export default {
  components: {
    JoblevelSelect,
    NationSelect,
    PositionSelect,
    PoliticsSelect,
    FormPanel,
    DepartmentSelect,
  },
  data() {
    return {
      dateRange: [],
      DICT: {
        WORKSTATE: {
          10: "10--在职",
          20: "20--试用",
          30: "30--正式",
          40: "40--离职",
        },
        GENDER: {
          男: "男",
          女: "女",
        },
        WEDLOCK: {
          已婚: "已婚",
          未婚: "未婚",
          离异: "离异",
        },
        POLITICID: {
          1: "1--中共党员",
          2: "2--中共预备党员",
          3: "3--共青团员",
          4: "4--民革党员",
          5: "5--民盟盟员",
          6: "6--民建会员",
          7: "7--民进会员",
          8: "8--农工党党员",
          9: "9--致公党党员",
          10: "10--九三学社社员",
          11: "11--台盟盟员",
          12: "12--无党派民主人士",
          13: "13--普通公民",
        },
        TIPTOPDEGREE: {
          本科: "本科",
          大专: "大专",
          硕士: "硕士",
          博士: "博士",
          高中: "高中",
          初中: "初中",
          小学: "小学",
          其他: "其他",
        },
        ENGAGEFORM: {
          劳动合同: "劳动合同",
          劳务合同: "劳务合同",
        },
      },
      summaryMap: {},
      pageNum: 1,
      page: {
        query: {
          orderBys: "departmentId|asc,workID|asc",
          param: {
            workState: null,
            isDeleted: false,
          },
        },
        getData: this.$api.hr.EmployeeService.query,
      },
      tableActions: [
        {
          name: "编辑",
          handle: this.edit,
        },
        {
          name: "删除",
          handle: this.del,
          style: "color:red",
        },
      ],
    };
  },
  computed: {},

  methods: {
    handleCommand(command) {
      this.page.query.orderBys = command;
      this.search();
    },
    calCbm(val) {
      return 0;
    },
    onDataloaded(rsp) {},
    /*
            导出
             */
    exportRecords() {
      let params = this.getSearchParams();
      this.$api.hr.EmployeeService.export(params);
    },
    getSearchParams() {
      this.page.query.dateRanges = {};
      if (this.dateRange && this.dateRange.length > 0) {
        this.page.query.dateRanges["holiday"] = {
          startDate: this.dateRange[0],
          endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
        };
      }
      return this.page.query;
    },
    create() {
      this.$refs.formDiag.show();
    },
    edit(row) {
      this.$refs.formDiag.show({ id: row.id });
    },
    toggleStatus(row) {},
    del(row) {
      this.$confirm("确定删除此条记录吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.hr.EmployeeService.deleteById(row.id).then((rsp) => {
          this.$msgJsonResult(rsp);
          this.search();
        });
      });
    },
    onFormSaved() {
      this.$refs.formDiag.hide();
      this.$nextTick(this.search);
    },
    init(options = {}) {
      this.search();
    },
    search() {
      this.$refs.table.pageNum = 1;
      this.getSearchParams();
      this.$refs.table.load();
    },
    cancel() {
      this.dateRange = [];
      this.page.query.param = { prdFlag: 0 };
      this.search();
    },
  },
  created() {},
  mounted() {
    this.$on("init", this.init);
  },
};
</script>
